{% extends 'base_tabler.html' %} {% block navname %}personality{% endblock %} {% block title %}音乐喜好分析{% endblock%}
{% block content %}
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">音乐喜好与社会趋势分析</h2>
        <div class="text-muted mt-1">基于用户调查数据的音乐偏好与社会文化分析报告</div>
      </div>
    </div>
  </div>
</div>

<!-- 雷达图和柱状图 -->
<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">不同年龄段的音乐喜好</h3>
      </div>
      <div class="card-body">
        <div id="radar_chart" style="width: 100%; height: 500px">{{ radar_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-12 mt-3">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">性别音乐偏好差异</h3>
      </div>
      <div class="card-body">
        <div id="gender_bar" style="width: 100%; height: 500px">{{ gender_bar|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 社交关系和趋势分析 -->
<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">社交活跃度与音乐偏好关系</h3>
      </div>
      <div class="card-body">
        <div id="social_line" style="width: 100%; height: 400px">{{ social_line|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-12 mt-3">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">音乐喜好历史变迁</h3>
      </div>
      <div class="card-body">
        <div id="trend_line" style="width: 100%; height: 400px">{{ trend_line|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 相关性分析 -->
<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">音乐喜好与个性特征相关性</h3>
      </div>
      <div class="card-body">
        <div id="correlation_scatter" style="width: 100%; height: 400px">{{ correlation_scatter|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 社会洞察 -->
<div class="row mt-3">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">社会文化洞察</h3>
      </div>
      <div class="card-body">
        {% for insight in social_insights %}
        <div class="mb-4">
          <h4 class="card-subtitle mb-2 text-primary">{{ insight.title }}</h4>
          <p class="text-muted">{{ insight.content }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}
